<template>
<div class="app-container">
  <!-- 视频 -->
   <h1>视频播放</h1>
  <video
    id="my-video"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="500px"
    muted
  >
  <source :src="url" type="application/x-mpegURL" />
  </video>
  <!-- word -->
  <!-- <div id="wordView" v-html="vHtml"></div> -->
  <!-- excel查看详情 -->
  <!-- <div id="table" >
    <el-table :data="excelData" style="width: 100%" border>
      <el-table-column
        v-for="(value, key, index) in excelData[1]"
        :key="index"
        :prop="key"
        :label="key"
      ></el-table-column>
    </el-table>
  </div> -->
  <!-- pdf -->
  <div class="scrollBox" style="width: 800px;">
      <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf" style="margin-bottom:10px"></pdf>
  </div>
  <!-- 图片预览 -->
  <div class="content">
    <h1>preview图片预览Demo</h1>
    <div class="viewWeb">
      <img  :src="srcUrl">
    </div>
  </div>
</div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
import XLSX from 'xlsx'
import mammoth from 'mammoth'
import pdf from 'vue-pdf'
import watermark from '@/utils/watermark.js'
export default {
  // components: {
  //   pdf
  // },
  data () {
    return {
      url: 'https://oss.lxw13000.cn/ffmpeg01/1/ry.m3u8',
      vHtml: '',
      wordURL: 'https://oss.databstech.com/upload/20220906153256845.docx',
      // https://oss.databstech.com/upload/20220906153256845.docx
      // https://oss.databstech.com/upload/20220906145748873.docx
      excelData: [],
      workbook: {},
      excelURL: 'https://oss.databstech.com/upload/20220908094125873.xlsx',
      // 'https://oss.databstech.com/upload/20220906155408141.xlsx'
      pdfSrc: 'https://oss.databstech.com/detabes/big-data-screen-gzy/20211222092941665.pdf',
      numPages: null,
      srcUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  created () {
    // this.readWorkbookFromRemoteFile(this.wordURL)
    // this.readExcelFromRemoteFile(this.excelURL)
  },
  mounted () {
    this.getVideo()
    this.getNumPages()
    setTimeout(() => {
      // watermark('viewWeb', require('@/assets/img.png'))
      watermark('viewWeb', '©西政教学成果平台', 'text')
    }, 200)
  },
  methods: {
    // 视频
    getVideo () {
      videojs(
        'my-video',
        {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true
        },
        function () {
          this.play()
        }
      )
    },
    // 在线查看word文件
    readWorkbookFromRemoteFile (url) {
      var vm = this
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log('打印', xhr.response)
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {
            vm.$nextTick(() => {
              // document.querySelector('#wordView').innerHTML =
              //   resultObject.value
              console.log(resultObject.value)
              vm.vHtml = resultObject.value
            })
          })
        }
      }
      xhr.send()
    },
    // 在线查看excel文件
    readExcelFromRemoteFile (url) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      const _this = this
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          var data = new Uint8Array(xhr.response)
          var workbook = XLSX.read(data, { type: 'array' })
          console.log('workbook', workbook)
          var sheetNames = workbook.SheetNames // 工作表名称集合
          _this.workbook = workbook
          _this.getTable(sheetNames[1])
        }
      }
      xhr.send()
    },
    getTable (sheetName) {
      console.log(sheetName)
      var worksheet = this.workbook.Sheets[sheetName]
      this.excelData = XLSX.utils.sheet_to_json(worksheet)
      console.log(this.excelData)
    },
    //  计算pdf页码总数
    getNumPages () {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.viewWeb{
  position: relative;
  width: 50%;
  img{
    width: 100%;
  }
}
</style>
